<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="项目名称：">
        <el-autocomplete
          v-model="name"
          :fetch-suggestions="querySearchAsync"
          placeholder="请填入项目名称"
          clearable
          style="width: 60%"
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item label="项目编码" prop="num">
        <el-input v-model="form.num" style="width: 46%" />
      </el-form-item>

      <el-form-item label="区域信息" prop="area">
        <el-input style="width: 46%" :value="form.area |typeFilter" />
      </el-form-item>

      <el-form-item label="工地联系人" prop="person">
        <el-input v-model="form.person" style="width: 46%" />
      </el-form-item>

      <el-form-item label="工地联系人电话" prop="phone">
        <el-input v-model="form.phone" style="width: 46%" />
      </el-form-item>

      <el-form-item label="工地地址" prop="address">
        <el-input v-model="form.address" style="width: 46%" />
      </el-form-item>

      <el-form-item label="拆除时间">
        <el-col :span="11">
          <el-date-picker
            v-model="DataSelect"
            type="daterange"
            unlink-panels
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          />
        </el-col>
        <!--        <el-col :span="2" class="line">-</el-col>-->
        <!--        <el-col :span="11">-->
        <!--          <el-date-picker v-model="form.repairtime_end" type="date" placeholder="请选择一个结束时间" value-format="timestamp" style="width: 100%;" />-->
        <!--        </el-col>-->
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="onCancel('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDeviceList } from '@/api/device'
import { addsubject_remove } from '@/api/subject'
// 区域信息
const calendarTypeOptions = [
  { key: '371601', display_name: '市直管' },
  { key: '371602', display_name: '滨城区' },
  { key: '371604', display_name: '开发区' },
  { key: '371605', display_name: '高新区' },
  { key: '371606', display_name: '北海新区' },
  { key: '371621', display_name: '惠民县' },
  { key: '371622', display_name: '阳信县' },
  { key: '371623', display_name: '无棣县' },
  { key: '371624', display_name: '沾化区' },
  { key: '371625', display_name: '博兴县' },
  { key: '371626', display_name: '邹平市' },
  { key: '371627', display_name: '工业园区' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    const generateData = _ => {
      const data = []

      return data
    }
    return {
      rules: {
        name: [
          { required: true, message: '请填写项目名称', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请填写项目编号', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请填写项目区域', trigger: 'blur' }
        ],
        person: [
          { required: true, message: '请填写项目联系人', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写项目联系人电话', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写项目所在地', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
        // build: [
        //   { required: true, message: '请填写项目施工单位', trigger: 'blur' },
        //   // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // pay:[
        //   {required: true, message: '请填写项目服务费', trigger: 'blur'}
        // ]
      },
      form: {
        subject_name: '',
        subject_num: '',
        subject_build: '',
        subject_bank: '',
        subject_pay: '',
        subject_paytime_start: '',
        subject_paytime_end: '',
        subject_time: '',
        subject_person: '',
        subject_phone: '',
        repair_person: '',
        repair_phone: '',
        subject_area: '',
        subject_address: '',
        subject_device_data: [],
        repairtime_start: '',
        repairtime_end: ''
      },
      DataSelect: [], // 时间
      name: '',
      restaurants: [],
      deviceData: [],
      state: '',
      timeout: null,
      data: generateData(),
      value: [],
      renderFunc(h, option) {
        return '<span>{ option.key } - { option.label }</span>'
      }
    }
  },
  mounted() {
    console.log('ssss')
    this.restaurants = this.loadAll()
  },
  methods: {
    loadAll() {
      return [

      ]
    },
    querySearchAsync(queryString, cb) {
      console.log('ddd')
      // 获取项目信息
      getDeviceList(
        {
          subject_name: queryString
        }).then((res) => {
        if (res.code == '20000') {
          cb(res.data)
          // this.$message('提交成功!')
        } else {
          this.$message({
            message: '提交失败，请联系管理员!',
            type: 'warning'
          })
        }
      })
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      console.log('queryString:', queryString)
      if (results.length > 0) {
        this.timeout = setTimeout(() => {
          this.form.num = ''
          cb(results)
        }, 3000 * Math.random())
      }
    },
    createStateFilter(queryString) {
      console.log('createStateFilter')
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      this.form.num = item.num
      this.form.area = item.type
      this.form.person = item.person
      this.form.phone = item.phone
      console.log('item', item)
      console.log(this.form.num)
    },
    onSubmit(form) {
      // 获取表单信息
      var subject_num = this.form.num// 项目编码
      var subject_name = this.name// 项目铭传给你
      var subject_area = this.form.area// 项目所在地
      var subject_person = this.form.subject_person// 项目联系人
      var subject_phone = this.form.subject_phone// 项目联系人电话
      var remove_person = this.form.person// 维修联系人
      var remove_phone = this.form.phone// 维修联系人电话
      var subject_time = this.form.time// 项目完工时间
      if (this.DataSelect == '') {
        var removetime_start = undefined
        var removetime_end = undefined
      } else {
        var removetime_start = this.DataSelect[0]
        var removetime_end = this.DataSelect[1]
      }

      var subject_address = this.form.address
      // console.log('deviceData_end:',this.value4)
      this.$refs[form].validate((valid) => {
        console.log(valid)
        if (valid) {
          console.log('ddddddd')
          addsubject_remove(
            {
              subject_num: subject_num,
              subject_name: subject_name,
              subject_area: subject_area,
              subject_person: subject_person,
              subject_phone: subject_phone,
              remove_person: remove_person,
              remove_phone: remove_phone,
              subject_time: subject_time,
              removetime_start: removetime_start,
              removetime_end: removetime_end,
              remove_address: subject_address
            }).then((res) => {
            if (res.code == '20000') {
              this.$message('提交成功!')
              // 调用全局挂载的方法,关闭当前标签页
              this.$store.dispatch('tagsView/delView', this.$route)
              // 返回上一步路由，返回上一个标签页
              this.$router.go(-1)
            } else {
              this.$message({
                message: '提交失败，请联系管理员!',
                type: 'error'
              })
            }
          })
        } else {
          this.$message('请填完整后再提交!')
          console.log('error submit!!')
          return false
        }
      })
    },

    onCancel(form) {
      this.$message({
        message: '数据已清空!',
        type: 'warning'
      })
      this.$refs[form].resetFields()
    }
  }

}
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>

